define([
    '@/components/header', 
    '@/components/footer',
    '@/components/ReactSwipe',
    '@/components/dialog'], 
  function(
    Header, 
    Footer, 
    ReactSwipe,
    Dialog
  ) {
    const  { html, Component, render, linkState } = preact;
    class Demo extends Component {
        constructor(props){
          super(props)
          this.state = {
            todos: [],
            dialogVisible: false,
            text: 'hello'
          }
        }

        addTodo() {
            const todos = this.state.todos || [];
            this.setState({ todos: todos.concat(`Item ${todos.length}：${this.state.text}`) });
          }
       render({ }, { todos = [], dialogVisible, text }) {
            return html`
            <div class="game-app">
            <${Header} name="ToDo" />
            


            <div class="dialog-demo">
              <button class="open" onClick=${()=>this.setState({dialogVisible: true})}>open</button>
              
              <${ReactSwipe}
              className="carousel"
              style=${{overflow:'hidden', height:"300px"}}
              swipeOptions=${{ continuous: false }}
              ref=${el => {this.el = el}}
              >
                <div style=${{height: "300px"}}>PANE 1</div>
                <div style=${{height: "300px"}}>PANE 2</div>
                <div style=${{height: "300px"}}>PANE 3</div>
              <//>
              
              ${ dialogVisible && html`
                <${Dialog} 
                title="test"
                width="5rem"
                height="7rem"
                close=${()=>this.setState({dialogVisible: false})}
                footer=${html`<button onClick=${()=>this.setState({dialogVisible: false})}>确定</button>`}
                >
                  <div style="font-size:0.4rem">
                    todo
                      <ul>
                        ${todos.map(todo => html`
                          <li>${todo}</li>
                        `)}
                      </ul>
                      
                      
                      <button onClick=${this.addTodo.bind(this)}>Add Todo</button>

                      <br/>
                      <br/>
                      双向绑定：
                      <br/>
                      ${text}<br/>
                      <input value=${text} onInput=${linkState(this, 'text')} />
                    
                  </div>
                <//>
              ` }


            </div>

            <!-- <${Footer}>footer content here<//> -->

          </div>`
       }

    }


       return Demo;

  })


